<template>
  <div class="app-container">
    <el-card>
      <p class="pinformation">合同基本信息</p>
      <el-form :model="queryParams" ref="queryRef" label-width="80">
        <el-row>
          <el-col :span="4">
            <el-form-item label="合同编号：" prop="fileMc">
              G202301-001
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="合同名称：" prop="fileMc">
              齐鲁石化印染厂2023年度合同
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="委托单位：" prop="fileMc">
              齐鲁石化印染厂
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="付款单位名称："
              prop="fileMc"
              label-width="100"
            >
              齐鲁石化印染厂
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="银行账号：" prop="fileMc">
              6222 8553 1232 8888
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="开户行：" prop="fileMc">
              中过银行济南建设路支行
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="联系人：" prop="fileMc"> 唐国强 </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="联系电话：" prop="fileMc">
              13377778888
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="业务员：" prop="fileMc"> 刘军 </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="12" style="padding-right: 10px;">
          <p class="pinformation">财务统计</p>
          <el-form :model="queryParams" ref="queryRef" label-width="80">
            <el-row style="justify-content: space-between">
              <el-form-item label="合同总额：" prop="fileMc">
                345980
              </el-form-item>
              <el-form-item label="超支金额：" prop="fileMc">
                10000
              </el-form-item>
              <el-form-item label="超支扣税：" prop="fileMc">
                100
              </el-form-item>
              <el-form-item label="外包金额：" prop="fileMc" label-width="100">
                10000
              </el-form-item>
              <el-form-item label="业务提成：" prop="fileMc">
                10000
              </el-form-item>
              <el-form-item label="实收金额：" prop="fileMc">
                10000
              </el-form-item>
              <el-form-item label="当前实收：" prop="fileMc">
                10000
              </el-form-item>
            </el-row>
          </el-form>
          <el-row style="justify-content: space-between">
            <el-row>
              <p class="pinformation" style="margin-top: 9px">
                方案金额汇总列表
              </p>
              <p class="totalStyle" style="margin-top: 6px">
                共 {{ tatol }} 条数据
              </p>
            </el-row>
            <el-form-item label="单位：" prop="fileMc"> 元 </el-form-item>
          </el-row>
          <el-table :data="tableData" ref="dataTableRef">
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="方案编号"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="方案编号"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="方案名称"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="方案金额"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="实收金额"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="已开发票"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="备注"
              prop="jclbName"
            />
          </el-table>
        </el-col>
        <el-col :span="12" style="padding-left: 10px;">
          <el-row>
            <p class="pinformation">回款记录列表</p>
            <p class="totalStyle">共 {{ tableData.length }} 条数据</p>
            <el-row style="padding-bottom: 5px; margin-left: 20px">
              <el-button link>新增</el-button>
            </el-row>
          </el-row>
          <el-table :data="tableData" ref="data1TableRef">
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="回款日期"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="回款金额"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="汇款方"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="回款方式"
              prop="jclbName"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="包含方案"
              prop="jclbName"
            />
            <el-table-column label="操作" align="center" width="120">
              <template #default="scope">
                <el-button link type="success">编辑</el-button>
                <el-button link type="success">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const queryParams = ref({});
const tableData = ref([]);
const tatol = ref(0);

const heightParams = ref([{ tableName: "data", bottomHeight: 21 },{ tableName: "data1", bottomHeight: 21 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>
